<template>
  <div id="yzm">
    <canvas id="canvas" style="width: 130px"></canvas>
  </div>
</template>

<script>
import Captcha from "captcha-mini";
export default {
  data() {
    return {
      cap: {
        lineWidth: 1, //线条宽度
        lineNum: 6, //线条数量
        dotR: 2, //点的半径
        dotNum: 25, //点的数量
        preGroundColor: [10, 80], //前景色区间
        backGroundColor: [150, 250], //背景色区间
        fontSize: 60, //字体大小
        fontFamily: ["Georgia", "微软雅黑", "Helvetica", "Arial"], //字体类型
        fontStyle: "stroke", //字体绘制方法，有fill和stroke
        content: "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM", //验证码内容
        length: 4, //验证码长度
      },
    };
  },
  methods: {},
  mounted() {
    let captcha1 = new Captcha(this.cap);
    captcha1.draw(document.querySelector("#canvas"), (r) => {
      console.log(r, "验证码1");
      this.$emit("but", r);
    });
  },
};
</script>

<style lang="scss">
#yzm {
  display: inline-block;
  font-size: 0px;
  margin: 10px;
  position: relative;
  top: 15px;
}
</style>